<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<ul class="nav ace-nav">
    <li class="grey dropdown-modal">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" title="任务">
            <i class="ace-icon fa fa-tasks"></i>
            <span class="badge badge-grey">4</span>
        </a>
        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
                <i class="ace-icon fa fa-check"></i> 4 Tasks to complete
            </li>
            <li class="dropdown-content">
                <ul class="dropdown-menu dropdown-navbar">
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">Software Update</span>
                                <span class="pull-right">65%</span>
                            </div>
                            <div class="progress progress-mini">
                                <div style="width:65%" class="progress-bar"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">Hardware Upgrade</span>
                                <span class="pull-right">35%</span>
                            </div>
                            <div class="progress progress-mini">
                                <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">Unit Testing</span>
                                <span class="pull-right">15%</span>
                            </div>
                            <div class="progress progress-mini">
                                <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">Bug Fixes</span>
                                <span class="pull-right">90%</span>
                            </div>
                            <div class="progress progress-mini progress-striped active">
                                <div style="width:90%" class="progress-bar progress-bar-success"></div>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown-footer">
                <a href="javascript:void(0);" class="btn-view-work">
                    查看任务详情 <i class="ace-icon fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </li>
    <li class="purple dropdown-modal">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" title="通知">
            <i class="ace-icon fa fa-bell icon-animated-bell"></i>
            <span class="badge badge-important">8</span>
        </a>
        <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
                <i class="ace-icon fa fa-exclamation-triangle"></i> 8条通知
            </li>
            <li class="dropdown-content">
                <ul class="dropdown-menu dropdown-navbar navbar-pink">
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
                                    New Comments
                                </span>
                                <span class="pull-right badge badge-info">+12</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="btn btn-xs btn-primary fa fa-user"></i>
                            Bob just signed up as an editor ...
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
                                    New Orders
                                </span>
                                <span class="pull-right badge badge-success">+8</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="clearfix">
                                <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
                                    Followers
                                </span>
                                <span class="pull-right badge badge-info">+11</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown-footer">
                <a href="javascript:void(0);" class="btn-view-notice">
                    查看所有通知 <i class="ace-icon fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </li>
    <li class="green dropdown-modal">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" title="消息">
            <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
            <span class="badge badge-success">${messageUnreadCount}</span>
        </a>
        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
                <i class="ace-icon fa fa-envelope-o"></i>${messageUnreadCount}条消息
            </li>
            <li class="dropdown-content">
                <ul class="dropdown-menu dropdown-navbar">
                    <li>
                        <a href="#" class="clearfix">
                            <img src="${ctx}/static/images/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar"/>
                            <span class="msg-body">
                                <span class="msg-title">
                                    <span class="blue">Alex:</span> Ciao sociis natoque penatibus et auctor ...
                                </span>
                                <span class="msg-time">
                                    <i class="ace-icon fa fa-clock-o"></i><span>a moment ago</span>
                                </span>
                            </span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="clearfix">
                            <img src="${ctx}/static/images/avatars/avatar3.png" class="msg-photo"
                                 alt="Susan's Avatar"
                            />
                            <span class="msg-body">
                                                <span class="msg-title">
                                                    <span class="blue">Susan:</span>
                                                    Vestibulum id ligula porta felis euismod ...
                                                </span>

                                                <span class="msg-time">
                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                    <span>20 minutes ago</span>
                                                </span>
                                            </span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="clearfix">
                            <img src="${ctx}/static/images/avatars/avatar4.png" class="msg-photo"
                                 alt="Bob's Avatar"
                            />
                            <span class="msg-body">
                                                <span class="msg-title">
                                                    <span class="blue">Bob:</span>
                                                    Nullam quis risus eget urna mollis ornare ...
                                                </span>

                                                <span class="msg-time">
                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                    <span>3:15 pm</span>
                                                </span>
                                            </span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="clearfix">
                            <img src="${ctx}/static/images/avatars/avatar2.png" class="msg-photo"
                                 alt="Kate's Avatar"
                            />
                            <span class="msg-body">
                                                <span class="msg-title">
                                                    <span class="blue">Kate:</span>
                                                    Ciao sociis natoque eget urna mollis ornare ...
                                                </span>

                                                <span class="msg-time">
                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                    <span>1:33 pm</span>
                                                </span>
                                            </span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="clearfix">
                            <img src="${ctx}/static/images/avatars/avatar5.png" class="msg-photo"
                                 alt="Fred's Avatar"
                            />
                            <span class="msg-body">
                                                <span class="msg-title">
                                                    <span class="blue">Fred:</span>
                                                    Vestibulum id penatibus et auctor ...
                                                </span>

                                                <span class="msg-time">
                                                    <i class="ace-icon fa fa-clock-o"></i>
                                                    <span>10:09 am</span>
                                                </span>
                                            </span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="dropdown-footer">
                <a href="javascript:void(0);" class="btn-view-message">
                    查看所有消息 <i class="ace-icon fa fa-arrow-right"></i>
                </a>
            </li>
        </ul>
    </li>
    <li class="light-blue dropdown-modal">
        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
            <img class="nav-user-photo" src="${ctx}/static/images/avatars/user.jpg" alt="Jason's Photo"/>
            <span class="user-info">
                <small>欢迎您！</small>
                <sys:showLoginUsername/>
            </span>
            <i class="ace-icon fa fa-caret-down"></i>
        </a>
        <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
            <li><a href="#"><i class="ace-icon fa fa-cog"></i> 设置</a></li>
            <li><a class="btn-view-info" href="javascript:void(0);"><i class="ace-icon fa fa-user"></i> 个人资料</a></li>
            <li class="divider"></li>
            <li><a href="${ctx}/logout"><i class="ace-icon fa fa-power-off"></i> 退出</a></li>
        </ul>
    </li>
</ul>